<template>
  <div>
    <div class="tabs-left my-wrap">
      <p>个人信息</p>
      <div class="dis-wrap-avetit">
        <div class="heard-ava">
          <div>
            <el-upload
              class="avatar-uploader"
              action="http://39.103.238.144:3000/api/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <span class="updatamyAva">点击上传头像</span>
          </div>

        </div>
        <div class="heard-tit">
          <div class="inputs-wrap">
            <span>昵称：</span>
            <input
              type="text"
              :value="userinfo[0].uname"
              v-if="avatars"
              disabled
            />
          </div>

          <div class="inputs-wrap">
            <span>手机：</span>
            <input
              type="text"
              disabled
              :value="userinfo[0].iphone"
              v-if="avatars"
            />
          </div>
          <div class="inputs-wrap">
            <span>邮箱：</span>
            <input
              type="text"
              placeholder="填写邮箱"
              v-model="emails"
              v-if="avatars"
            />
          </div>
          <div class="inputs-wrap">
            <span>签名：</span>
            <input
              type="text"
              maxlength="30"
              placeholder="填写个性签名"
              v-if="avatars"
              v-model="qianm"
            />
          </div>
          <div class="inputs-wraps">
            <span>性别：</span>
            男：<input type="radio" name="sex" :value="1" v-model="gender" />
            女：<input type="radio" name="sex" :value="0" v-model="gender" />
          </div>
          <div class="trues-wraps">
            <span class="trues" @click="submitUpdata()">保存</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import sessionLogin from "../../http/session";
export default {
  name: "Mycenter",
  //   showGender:false,
  data() {
    return {
      qianm: "这个人很懒，什么也没写",
      qianms: "",
      list: [{ app: "我的订单" }, { app: "基本信息" }],
      num: 1,
      shows: false,
      gender: 1,
      userinfo: "",
      avatars: false,
      myavater: "",
      files: "",
      emails: "", //邮箱
      signature: "",
      alertshow: true, //消息提示框,
      imageUrl: "",
    };
  },

  mounted() {
    //查询当前登录状态的用户信息
    this.getMyInfoSession();
  },
  components: {},
  methods: {
    // 请求当前用户的账户信息
    getMyInfoSession() {
      sessionLogin()
        .then((res) => {
          console.log(res.data.data);
          this.userinfo = res.data.data;
          this.emails = res.data.data[0].email;
          this.avatars = true;
          this.gender = res.data.data[0].gender;
          this.qianm = res.data.data[0].qianming;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    tabs(index) {
      this.num = index;
      if (index == 0) {
        this.shows = true;
      } else if (index == 1) {
        this.shows = false;
      }
    },

    // 头像上传后保存到数据库中
    async updataAvas(avatar) {
      let sess = sessionStorage.getItem("cookie-session");
      let encodedData = window.atob(sess);
      let avas = await this.$http.post("/updataAvatar", {
        uname: encodedData,
        avatar: avatar,
      });
      // 让监听器监听刷新
      this.files = true;
    },

    // 用户邮箱等资料修改
    async submitUpdata() {
      let sess = sessionStorage.getItem("cookie-session");
      let encodedData = window.atob(sess);
      let upadtaMyinfoEG = await this.$http.post("/upadtaMyinfo", {
        uname: encodedData,
        gender: this.gender,
        email: this.emails,
        qianming: this.qianm,
      });
      if (upadtaMyinfoEG.data.code == 200) {
        this.$message({
          message: upadtaMyinfoEG.data.message,
          type: "success",
        });
      } else {
        this.$message({
          message: upadtaMyinfoEG.data.message,
          type: "error",
        });
      }
    },
    // 头像组件
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      // 更新到数据库
      this.updataAvas(res.data)
      window.history.go(0)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
  created() {},
  watch: {
    files(news) {
      this.getMyInfoSession();
    },
  },
};
</script>

<style lang="scss" scoped>
.tabs-left {
  > p {
    font-size: 18px;
    margin: 25px 0;
    color: rgb(240, 54, 54);
    padding-bottom: 25px;
  }

  .dis-wrap-avetit {
    display: flex;
    justify-content: space-between;
  }
  .heard-ava {
    width: 280px;
    min-height: 500px;
    text-align: center;
    position: relative;
    > img {
      width: 270px;
      height: 270px;
      margin-bottom: 20px;
    }
    > span {
      font-size: 18px;
      color: #ffffff;
      background: #41c1ec;
      border-radius: 10px;
      padding: 15px 35px;
      cursor: pointer;
    }
    #ava-files {
      position: absolute;
      top: 230px;
      left: 10px;
      opacity: 0;
      z-index: 2;
    }
    #ava-files-upload {
      position: absolute;
      top: 230px;
      left: 10px;
      padding: 6px 10px;
      background: orangered;
      border-radius: 10px;
      color: paleturquoise;
    }
  }
  .heard-tit {
    width: 400px;
    min-height: 500px;
    text-align: center;
    .inputs-wrap {
      margin-bottom: 40px;
      > span {
        color: #646060;
        font-size: 16px;
        font-weight: bold;
      }
      > input {
        background: rgb(255, 255, 255);
        box-sizing: border-box;
        padding: 20px 10px;
        outline: none;
        border: none;
        border-radius: 5px;
        width: 300px;
        height: 30px;
        border: 1px solid rgb(226, 225, 225);
        border-radius: 5px;
      }
    }
    .inputs-wraps {
      margin-bottom: 30px;
      color: #646060;
      font-size: 16px;
      font-weight: bold;
    }
    .trues-wraps {
      width: 400px;
      text-align: center;
      .trues {
        font-size: 20px;
        padding: 10px 25px;
        color: #ffffff;
        background: #41c1ec;
        border-radius: 10px;
      }
    }
  }
}
.active {
  background: rgb(235, 51, 51);
  color: #fff !important;
}


/* ui */
.avatar-uploader  {
  border: 1px dashed #c0bebe;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader :hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.updatamyAva{
  margin-top:10px ;
  color: #409eff;
}
</style>